<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href="./common/images/favicon.png"> -->

    <title>兼贝企业合作</title>

    {{--iview--}}
    <link rel="stylesheet" href="{{ URL::asset('/include/iview/styles/iview.css')}}">
    <!-- Bootstrap core CSS -->
    <link href="{{ URL::asset('/system/js/bootstrap/dist/css/bootstrap.css')}}" rel="stylesheet"/>

    <link href="https://cdn.bootcss.com/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css" rel="stylesheet">

    <style type="text/css">

        body
        {
            background-color: #fff;
            /*min-width: 992px;*/
        }
        a, a:visited, a:hover
        {
            text-decoration: none;
        }
        .navbar
        {
            margin: 0 10px;
            padding: 10px 0;
            background-color: #fff;
            border: 0;
            border-bottom: 1px solid #ccc;
            border-radius: 0;
        }

        .navbar img
        {
            width: 200px;
        }

        .header
        {
            margin-top: 20px;
            margin-bottom: 5px;
        }

        .header p
        {
            margin: 0;
            color: #F56580;
        }

        .header li
        {
            list-style-type: square;
            color: #F56580;
        }

        .header li span
        {
            color: #333;
        }

        .content
        {
            border: 1px solid #ccc;
            /*margin-top: 20px; */
            /*text-align: center;*/
        }

        .content .row
        {
            padding: 10px 0;
        }

        .starTag
        {
            vertical-align: middle;
            color: #F56580;
        }

        .content .infoItem
        {
            padding:5px 10px;
        }

        .content .infoItem .desc
        {
            padding-top: 6px;
            width: 180px;
        }

        .content .infoItem .tips
        {
            padding-top: 6px;
            color: #ccc;
        }

        .content .infoItem .tips button
        {
            color: #333;
        }

        .buttonDiv
        {
            margin: 40px 0;
            text-align: center;
        }

        .buttonDiv a
        {
            background: url({{ URL::asset('/system/assets/img/anniuBg.png') }}) center center no-repeat;
            padding: 20px 75px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
        }

        .form-control
        {
            border-color: #888;
        }

    </style>

</head>
<body>
    <!-- Fixed navbar -->
    <div id="head-nav" class="navbar navbar-default">
        <a href="/company">
            <img src="{{ URL::asset('/system/assets/img/qiyeLogo.jpg') }}">
        </a>
    </div>

    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">  
                            <div class="pull-left">
                                <li><span>申请企业合作</span></li>
                            </div>                      
                            
                            <div class="pull-right">
                                <p>请认真填写一下信息，提交后将有专人与您联系</p>
                            </div>
                            <div class="clearfix"></div>    
                        </div>
                        <div class="content">
                            <div class="row">
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">
                                        <span class="starTag">*</span> 企业名称：
                                    </div>
                                    <div class="col-sm-6 value">
                                        <input id="company_name" msg="请输入贵公司的企业名称" v-model="formData.company_name" type="text" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-sm-3 tips">
                                        请填写企业全名
                                    </div>
                                </div>
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">
                                        <span class="starTag">*</span> 联系人：
                                    </div>
                                    <div class="col-sm-6 value">
                                        <input id="contact_man" msg="请输入贵公司的联系人" v-model="formData.contact_man" type="text" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-sm-3 tips">
                                        请填写联系人名称
                                    </div>
                                </div>
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">
                                        <span class="starTag">*</span> 联系方式：
                                    </div>
                                    <div class="col-sm-6 value">
                                        <input id="contact_way" msg="请输入贵公司的联系方式" v-model="formData.contact_way" type="text" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-sm-3 tips">
                                        请填写联系方式，电话或邮箱
                                    </div>
                                </div>
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">
                                        <span class="starTag">*</span> 上传企业营业执照：
                                    </div>
                                    <div class="col-sm-6 value">
                                        <input id="image" msg="请正确上传贵公司的营业执照" v-model="formData.image" disabled type="text" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-sm-3 tips">
                                        <Upload style="float: left;margin-top: -5px"
                                                :before-upload="handleUpload"
                                                :on-success="handleSuccess"
                                                :max-size="2048"
                                                :on-exceeded-size="handleMaxSize"
                                                :format="['jpg','jpeg','png','gif']"
                                                :on-format-error="handleFormatError"
                                                :headers="headers"
                                                :show-upload-list="false"
                                                action="/company/uploadImages">
                                            <i-button type="ghost" icon="ios-cloud-upload-outline">上传相片</i-button>
                                            <span v-if="uploading">正在上传....</span>
                                            {{--<span v-if="errorInputs.image" v-bind:class="{'error' : errorInputs.image}">请上传营业执照</span>--}}
                                        </Upload>
                                        <a v-if="formData.business_license" style="display: block;float: left;margin-left: 10px" data-toggle="lightbox" href="#Lightbox">查看营业执照</a>
                                    </div>
                                </div>
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">
                                        <span class="starTag">*</span> 希望发布的任务类型：
                                    </div>
                                    <div class="col-sm-6 value">
                                        <input id="release_type" msg="请正确上传贵公司的希望发布的任务类型" v-model="formData.release_type" type="text" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-sm-3 tips">
                                        例：游戏、分享
                                    </div>
                                </div>
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">
                                        <span class="starTag">*</span> 希望的目标群体类型：
                                    </div>
                                    <div class="col-sm-6 value">
                                        <input id="target_throng" msg="请正确上传贵公司的希望的目标群体类型" v-model="formData.target_throng" type="text" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-sm-3 tips">
                                        例：学生、蓝领
                                    </div>
                                </div>
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">&nbsp;&nbsp;备注信息：</div>
                                    <div class="col-sm-6 value">
                                        <textarea v-model="formData.remark" class="form-control" style="min-height: 120px;"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="buttonDiv">
                            <a href="javascript:;" v-on:click="submit" class="button">提交申请</a>
                        </div>
                    </div>              
                </div>
                <div id="Lightbox" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class='lightbox-dialog'>
                        <div class='lightbox-content'>
                            <img v-bind:src="formData.business_license" style="width: 100%">
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <script src="{{ URL::asset('/include/vue/vue.js')}}"></script>
    <script src="{{ URL::asset('/include/vue-resource/vue-resource.js')}}"></script>
    <script src="{{ URL::asset('/include/iview/iview.min.js')}}"></script>

    <script src="{{ URL::asset('/js/common.js')}}"></script>

    <script type="text/javascript" src="{{ URL::asset('/system/js/jquery.js')}}"></script>
    <script src="{{ URL::asset('/system/js/bootstrap/dist/js/bootstrap.min.js')}}"></script>

    <script src="https://cdn.bootcss.com/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>

    <script type="text/javascript">

        Vue.use(VueResource)

        var app = new Vue({
            el: '#pcont',
            data: {
                headers: {},
                fileName: '',
                uploading: false,
                errorInputs: {
                    company_name: false,
                    contact_man: false,
                    contact_way: false,
                    release_type: false,
                    target_throng: false
                },
                formData: {
                    company_name: '',
                    contact_man: '',
                    contact_way: '',
                    image: '',
                    business_license: '',
                    release_type: '',
                    target_throng: '',
                    remark: ''
                }
            },
            created: function () {
                this.headers = header()
            },
            methods : {
                handleUpload : function (file) {
                    this.uploading = true
                    return true
                },
                handleSuccess : function (json) {
                    if (json.state == 1) {
                        this.uploading = false
                        this.formData.image = json.data.file_name
                        this.formData.business_license = json.data.path
                    }
                },
                handleFormatError : function (file) {
                    alert('请选择图片类文件（*.png,*.jpg,*.jpeg,*.gif）上传')
                    this.uploading = false
                    return false
                },
                handleMaxSize : function (file) {
                    alert('上传文件太大')
                    return false
                },
                submit : function(){
                    var _this = this
                    // 表单验证
                    var hasError = false
                    $.each(_this.errorInputs, function (index, item) {
                        console.log(_this.formData[index])
                        if (isNull(_this.formData[index])) {
                            _this.errorInputs[index] = true
                            if (!hasError) {
                                hasError = true
                            }
                            $("#"+index).focus()
                            var msg = $("#"+index).attr('msg')
                            alert(msg)
                            return false
                        } else {
                            _this.errorInputs[index] = false
                        }
                    })
                    if (hasError) {
                        return false
                    }
                    submit(this)
                }
            }
        })
        // 审批任务
        function submit(_vm) {
            var data = _vm.formData
            app.$http.post("/company/submit", data , {headers : header()})
                .then(function(response){
                    var json = response.body;
                    alert(json.msg);
                    if(json.state == 1) {
                    }
                }).catch(function(response){
                console.log(response)
            })
        }

    </script>

  </body>

</html>
